<template>
    <view class="manAndwomen">
        <view bindtap="changeSex(1)">
            <view>男</view>
            <i class="iconfont icon-gou {{my_sex==='MALE' ? 'active' : ''}}"></i>
        </view>
        <view bindtap="changeSex(0)">
            <view>女</view>
            <i class="iconfont icon-gou {{my_sex!=='MALE' ? 'active' : ''}}"></i>
        </view>
    </view>

</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import {USER_INFO, USER_SPECICAL_INFO, USER_ID} from '@/utils/constant'

    export default class menAndwomen extends wepy.page {
      config = {
        // 配置当前页面
        navigationBarTitleText: '修改性别' // 头部标题
      }
      components = {}

      data = {
        my_sex: ''
      }

      async modifyInfo() {
        let that = this
        let user_id = wepy.getStorageSync(USER_ID) || ''
        api
          .updateUserInformation(
            {
              query: {
                userId: user_id,
                key: 'sex',
                value: that.my_sex
              },
              method: 'PUT'
            },
            'userId=' + user_id + '&key=sex&value=' + that.my_sex
          )
          .then(function(res) {
            if (res.data.code == 0) {
              wepy.navigateTo({
                url: '/pages/personalCenter/userDetails'
              })
            } else {
              tip.error(res.data.msg)
            }
          })
      }

      onLoad(option) {
        this.my_sex = option.sex
      }

      methods = {
        // 方法
        changeSex(a) {
          let self = this;
          if (+a) {
            if(this.my_sex == 'MALE'){
              return wepy.navigateBack();
            }
            this.my_sex = 'MALE';
            self.modifyInfo()
          } else {
            if(this.my_sex == 'FEMALE'){
              return wepy.navigateBack();
            }
            this.my_sex = 'FEMALE';
            self.modifyInfo()
          }
        }
      }
      events = {}
    }
</script>
<style lang="less">
.manAndwomen {
    background: #fff;
    margin-top: 20rpx;
    border-top: 1px solid #ddd;
    > view {
        padding: 0 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;

        i {
            color: #fff;
            justify-content: space-between;
        }

        .active {
            color: #ffb025;
        }
    }
    .btn_box {
        margin-top: 64rpx;
        margin-bottom: 64rpx;
        padding: 0 40rpx 50rpx 40rpx;
    }
}
</style>
